<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script>


        function upload() {

            if ($("#user").val().trim() === "" || $("#pass").val().trim() === "") {
                alert("请输入完整的信息");
                return;
            }


            var formData = new FormData($("#uploadForm")[0])  //创建一个forData
            formData.append('img', $('#pic_img')[0].files[0]) //把file添加进去  name命名为img

            formData.append("user", $("#user").val());
            formData.append("pass", $("#pass").val());

            $.ajax({
                url: "index.php",
                data: formData,
                type: "POST",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    //成功
                    alert("注册成功")
                    $('#pic').attr("src", "http://localhost/demo2/" + data);

                },
                error: function (e) {
                    //失败
                    alert(e)
                }
            })
        }

    </script>

    <style>


    </style>
</head>
<body>

<div class="container">
    <div style="width: 300px;margin: 0 auto;position: absolute;top: 20%;left: 40%;">

        <div class="container" style="text-align: center">
            <img src="img/bofang.svg" id="pic" width="100px" style=" border-radius: 50px" height="100px">
        </div>

        <form enctype="multipart/form-data" id="uploadForm" method="post">

            <div class="form-group">
                <label for="user">用户</label>
                <input type="text" class="form-control" id="user" name="user" placeholder="user">
            </div>

            <div class="form-group">
                <label for="user">密码</label>
                <input type="text" class="form-control" id="pass" name="pass" placeholder="user">
            </div>

            <div class="form-group">
                <label for="file">FIle</label>
                <input type="file" id="file" id="pic_img" name="xxx">
            </div>

            <input onclick="upload()" type="button" value="登录" class="btn-info btn col-12">
            <br><br>
            <input type="reset" value="重置" class="btn-warning btn col-12">
        </form>

    </div>
</div>
</body>
</html>